<template>
  <div class="custom-node">
    <handle
      type="target"
      :position="Position.Left"
      :style="{
        height: '16px',
        width: '6px',
        backgroundColor: '#09cc74',
      }"
    />

    <node-toolbar
      :is-visible="data.toolbarVisible"
      :position="Position.Top"
    >
      <a-button status="danger" @click="removeNodes(id)">
        删除
      </a-button>
    </node-toolbar>
    <a-tag color="green">
      事件结束节点
    </a-tag>
  </div>
</template>

<script lang="ts" setup>
import { defineProps } from 'vue';
import { Handle, useVueFlow, Position } from '@vue-flow/core';
import { NodeToolbar } from '@vue-flow/node-toolbar';
import { Props } from '@/components/form-design/event/type';

defineProps<Props>();

const { removeNodes } = useVueFlow();
</script>


<style lang="less" scoped>
.custom-node {
  min-width: 100px;
  gap: 4px;
  padding: 8px;
  background: white;
  border: 1px solid #09cc74;
  border-radius: 1px;
}
</style>
